Add site rewrite plan and simplify CLAUDE.md - #4

Replace "coming soon" placeholder with a contained dark-panel card
featuring headline, 4 metric cells, and inline email signup form.
Inspired by Shell Foundation's presentation-card aesthetic, adapted
to CH47's warm amber + Geist design system.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

The initial landing page commit referenced new CSS custom properties
(--color-panel, --color-neutral-*, --color-primary-*) that only existed
locally. This commit includes the updated design system tokens, layout
changes, LogoAnimated token updates, polish fixes to spacing/contrast,
and removes legacy pages/components from the pre-rebuild site.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Remove header border-bottom so logo floats above content
- Bump hint text opacity 0.25 → 0.35 for readability
- Merge duplicate .email-form__btn rule (glow animation)
- Remove data-counter from "0" cell (no-op animation)
- Remove logo glow/breathing animation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Design system:
- Prune main.css from 1169 to ~260 lines (remove 25 unused component
  patterns, 26 unused tokens, dead keyframes, stale responsive rules)
- Add panel token scale (panel-fg, panel-fg-muted, panel-fg-dim,
  panel-divider, panel-border) for dark surface consistency
- Add radius-xl (16px) and radius-2xl (24px) tokens for card
- Add shadow-card token
- Replace all hardcoded rgba() divider/text values with tokens

Accessibility:
- Fix heading hierarchy: add visually-hidden h2 above h3 metrics
- Add aria-live region for form success/error announcements
- Add focus-visible for submit button in dark context
- Strengthen input focus ring (0.12 → 0.3 opacity)
- Bump contrast: cell descriptions 0.5→0.6, placeholder 0.28→0.4,
  footer/icons 0.3→0.35 (via panel-dim token)
- Add aria-hidden to decorative button SVGs
- Remove redundant aria-label from buttons with visible text
- Set counter initial values to targets in HTML

Cleanup:
- Delete orphaned src/scripts/copy-to-clipboard.ts
- Remove dead sitemap filters from astro.config.mjs
- Add .playwright-mcp/ and .superdesign/ to .gitignore
- Remove dead --logo-glow CSS variable from LogoAnimated
- Fix hardcoded transition in LogoAnimated to use tokens

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…files

P0 fixes:
- Email input: :focus → :focus-visible with stronger ring (0.3 opacity)
- Email form: disable button during submission to prevent double-submit
- Email form: add aria-required, aria-invalid, restore original placeholder
- Tokenize 13 hardcoded rgba values in index.astro → design system tokens
- Add missing tokens: --color-panel-tint (0.05), --color-panel-tint-hover (0.08)
- Normalize mobile input heights from 50px to 48px (matches system base)
- Add pointer-events: none to disabled submit button

Stale cleanup:
- Rewrite CLAUDE.md to reflect actual current state
- Rewrite llms.txt (was referencing old MCP architecture, wrong GitHub org)
- Remove public/skills/ (4 files from archived skills repo)
- Remove tests/homepage.test.mjs (every test referenced deleted files)
- Remove legacy observers from scroll-reveal.ts (.hero, .rupture, data-section, data-animate)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Design tokens added:
- Full primary amber ramp (50-900, was 400-600)
- Full neutral scale (50, 600 added to fill gaps)
- Semantic colors: warning, info (had success, destructive)
- Light surface tokens: --color-fg, --color-fg-muted, --color-fg-dim,
  --color-border, --color-border-hover, --color-surface, --color-surface-raised
- --radius-full (pill shapes), --shadow-elevated

Components added (@layer components):
- .btn (primary, secondary, ghost) with sizes (sm, md, lg)
- .badge (default, primary, success, destructive)
- .card (bordered + flat variant)
- .label (mono uppercase, + muted variant)
- .code (inline) and .code-block (+ header)
- .divider (light + panel variant)

Brand reference page (/brand):
- Demonstrates all tokens, typography, and components
- Shows dark panel surface usage
- noindex, excluded from sitemap
- Live email form demos (all 3 variants)

Also: removed unused Geist weight 300 from font URL

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Add subtle hover micro-interactions to badges, buttons, code, and
brand page demos (swatches, radius, shadows, token table). Move ~25
inline style attributes in brand.astro to scoped CSS classes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Remove translateY hover from all buttons, email submits, and cards
- Remove unnecessary transform transitions and badge/code hover effects
- Fix CSS specificity: .brand-section h3 was overriding dark panel
  heading color (invisible text) and type sample sizes
- Shadow demos escalate on hover, radius demos darken border only

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Strip amber box-shadow hover glows from btn--primary, btn--secondary,
email-signup__submit, email-form__btn. Remove hero card button glow
animation. Hover is now background-color-only.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Nav.astro: sticky header with LogoAnimated, site name, and links
- Footer.astro: shared footer with social icons and ctrlswing attribution
- .link component: inline underline links with muted variant
- Typography scale tokens (--text-xs through --text-4xl)
- Spacing scale tokens (--space-1 through --space-16)
- Brand page: add Nav/Footer, link demos, token docs, spacing visualization
- Clean up brand header (no logo—Nav handles it), remove old footer styles

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Nav: floating pill centered on page with frosted glass background,
backdrop blur, grouped link pills in segmented control style.
Inspired by Raycast/Linear/Dub.co floating nav pattern.

Brand header: dark panel hero block with large "Design System"
display type, oversized "47" watermark, and section anchor pills
for quick navigation. Creates a strong identity moment.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Nav: max-width 960px (matches page content), removed "channel47"
text — logo does the work alone. Removed unused .nav__name styles.

Footer: replaced border-top with a Unicode signal waveform strip
using lower-block characters (▁▂▃▄▅▆▇█). Alternating tall and
short peaks create a modulated broadcast wave — ties into the
Channel 47 identity and LogoAnimated block-character vocabulary.
Amber-colored at 20% opacity.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Replace pill radius (--radius-full) with design system tokens
(--radius-md outer, --radius-xs inner) for shape consistency with
the geometric logo. Footer signal strip upgraded from subtle 8px
single-line to bold 14px 3-line woven waveform in amber.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Replaces the 15-section design system reference (1050 lines of swatch rows,
token tables, spacing bars) with 5 focused visual moments that show the
brand in use rather than in isolation:

1. The Mark — cinematic hero with LogoAnimated at 2x, wordmark, watermark
2. Palette — just 3 color blocks (cream, amber, charcoal), no 10-shade rows
3. Voice — typography shown as real brand copy, not specimen labels
4. In Context — single dark panel vignette composing badges, code, email,
   buttons together as a natural UI scene
5. Elements — tight grid of interactive cells (buttons, badges, radius,
   motion, type scale, signal waveform)

https://claude.ai/code/session_01J44ZBbNKdEtErkYFL2ccUv

https://claude.ai/code/session_01J44ZBbNKdEtErkYFL2ccUv